<template>
    <div class="ward-management">
        <!-- 搜索栏 -->
        <div class="search-bar">
            <el-input v-model="searchQuery" placeholder="输入病房的编号" clearable @clear="handleSearch"
                @keyup.enter="handleSearch">
                <template #append>
                    <el-button :icon="Search" @click="handleSearch" />
                </template>
            </el-input>
            <el-button type="primary" :icon="Plus" @click="handleAddWard">新增病房</el-button>
        </div>

        <!-- 职位列表 -->
        <el-table :data="filteredWards" stripe style="width: 100%" @row-click="handleRowClick">
            <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
                :sortable="column.sortable" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="link" :icon="Edit" @click.stop="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="link" :icon="Delete" @click.stop="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="totalWards"
                layout="total, sizes, prev, pager, next, jumper" @current-change="handlePageChange" />
        </div>

        <!-- 新增/编辑职位对话框 -->
        <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑职位' : '新增职位'">
            <el-form :model="form" ref="formRef" label-width="100px">
                <el-form-item label="编号" prop="number">
                    <el-input v-model="form.number" />
                </el-form-item>
                <el-form-item label="最大住院数" prop="maxCount">
                    <el-input v-model="form.maxCount" />
                </el-form-item>
                <el-form-item label="当前床位" prop="nowCount">
                    <el-input v-model="form.nowCount" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio label="可使用" :value="true" />
                        <el-radio label="关闭" :value="false" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="单价/天" prop="priceDay">
                    <el-input v-model="form.priceDay" />
                </el-form-item>
                <el-form-item label="科室" prop="department.name">
                    <DepartmentCP v-model:department-id="form.departmentId" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
import { DeleteWard, GetWards, PostWard, PutWard, } from '@/api/WardService'
import DepartmentCP from '@/components/DepartmentCP.vue'

const columns = [
    { prop: 'number', label: '编号', sortable: true },
    { prop: 'maxCount', label: '最大人数', sortable: true },
    { prop: 'nowCount', label: '当前人数', sortable: true },
    { prop: 'status', label: '状态', sortable: true },
    { prop: 'priceDay', label: '单价/天', sortable: true },
    { prop: 'department.name', label: '科室', sortable: false },
]

const wards = ref<any>([])
onMounted(async () => {
    try {
        const response = await GetWards()
        wards.value = response.data
    } catch (error) {
        console.error('加载病房详情失败:', error);
    }
})
const form = ref<any>({
    id: 0,
    number: '',
    maxCount: 3,
    nowCount: 0,
    status: true,
    IsDelete: false,
    departmentId: 0,
    priceDay: 0
})

const handleDelete = async (ward) => {
    wards.value = wards.value.filter(p => p.id !== ward.id)
    await DeleteWard(ward.id)
}
const handleAddWard = () => {
    form.value = {
        id: 0,
        number: '',
        maxCount: 3,
        nowCount: 0,
        status: true,
        IsDelete: false,
        departmentId: 0,
        priceDay: 50
    }
    isEdit.value = false
    dialogVisible.value = true
}
const handleEdit = (ward) => {
    form.value = ward
    isEdit.value = true
    dialogVisible.value = true
}
const handleSubmit = () => {
    const request = {
        id: form.value.id,
        number: form.value.number,
        maxCount: form.value.maxCount,
        nowCount: form.value.nowCount,
        status: form.value.status,
        departmentId: form.value.departmentId,
        priceDay: form.value.priceDay
    }
    formRef.value.validate((valid) => {
        if (valid) {
            if (isEdit.value) {
                const index = wards.value.findIndex(p => p.id === form.value.id)
                wards.value[index] = { ...request }
                // PutWardApi(form.value.id, form.value)
                PutWard(request.id, request)
                console.log('编辑职位:', request)
            } else {
                wards.value.push({ ...form.value, id: wards.value.length + 1 })
                PostWard(form.value)
                console.log('新增职位:', request)
            }
            dialogVisible.value = false
        }
        else {
            console.log("表单验证失败");
        }
    })
}

const handleSearch = () => {
    currentPage.value = 1
}
const handleRowClick = (ward) => {
    selectedWard.value = ward
    drawerVisible.value = true
}
// 搜索功能
const searchQuery = ref('')
const filteredWards = computed(() => {
    return wards.value.filter(ward =>
        ward.number.includes(searchQuery.value))
})


// 分页功能
const currentPage = ref(1)
const pageSize = ref(10)
const totalWards = computed(() => filteredWards.value.length)
const handlePageChange = (page) => {
    currentPage.value = page
}

const drawerVisible = ref(false)
const selectedWard = ref<any>(null)
const dialogVisible = ref(false)
const isEdit = ref(false)
const formRef = ref<any>(null)
</script>

<style scoped>
.ward-management {
    padding: 20px;
}

.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.pagination {
    margin-top: 20px;
    text-align: right;
}
</style>